<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(label, key) in treeStore.osType == 'linux'?linuxTab.tabConfig:winTab.tabConfig"
        :key="key"
        :label="label"
        :name="key"
      ></el-tab-pane>
    </el-tabs>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" v-if="treeStore.osType == 'linux'">
      <el-tab-pane
        v-for="(label, key) in linuxTab.tabConfig"
        :key="key"
        :label="label"
        :name="key"
      ></el-tab-pane>
    </el-tabs>-->
    <component :is="data.component[componentName]"></component> 
  </div>
</template>

<script setup>
import { ref, reactive, markRaw, onMounted, watch } from "vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
import portStatus from "../HostHardening/components/portStatus.vue";
import portRules from "./components/portRules.vue";
import portInRules from "./components/portInRules.vue";
import portOutRules from "./components/portOutRules.vue";
import portSetting from "./components/portSetting.vue";

const treeStore = useTreeStore();
treeStore.openTree();
const activeName = ref("portStatus");
const componentName = ref("portStatus");

watch(
  () => treeStore.osType,
  () => {
    activeName.value = "portStatus";
    componentName.value = "portStatus"
  }
);

const data = reactive({
  component: {
    portStatus: markRaw(portStatus),
    portRules: markRaw(portRules),
    portInRules: markRaw(portInRules),
    portOutRules: markRaw(portOutRules),
    portSetting: markRaw(portSetting),
  },
});
const winTab = ref({
  tabConfig: {
    portStatus: "端口状态",
    portRules: "端口规则",
    portSetting: "端口设置",
  },
});
const linuxTab = ref({
  tabConfig: {
    portStatus: "端口状态",
    portInRules: "端口入站规则",
    // portOutRules: "端口出站规则",
    portSetting: "端口设置",
  },
});
onMounted(() => {});
const tabType = (key) => {
  console.log(key);
  if (key == "端口状态" || key == "端口设置") {
    return true;
  }
  if (treeStore.osType == "win") {
    if (key == "端口规则") {
      return true;
    }
  } else {
    if (key == "端口入站规则" || key == "端口出站规则") {
      return true;
    }
  }
  return false;
};

const handleClick = (tab, event) => {
  componentName.value = tab.props.name;
};
</script>

<style lang="scss" scoped></style>
